<template>
  <!-- 搜索页面，也是三级分类点击进入的页面，只是请求的数据不一样 -->
  <div class="search">
    <!-- 头部 -->
    <header>
      <i class="iconfont icon-arrow-left" @click="goBack"></i>
      <h3>菜谱搜索</h3>
    </header>
    <!-- 搜索框 -->
    <div class="searchOption">
      <div class="searchInput">
        <i class="iconfont icon-sousuoxiao"></i>
        <input type="text" placeholder="搜索菜谱" @keydown.enter="listenInput" />
      </div>
      <i class="iconfont icon-shaixuan" @click="showAction"> </i>
    </div>
    <nav v-if="show">
      <li class="caipu" @click="chooseAction" :class="choose == 'caipu' ? 'activea' : ''">菜谱</li>
      <li class="user" @click="chooseAction" :class="choose == 'user' ? 'activea' : ''">用户</li>
      <li class="menu" @click="chooseAction" :class="choose == 'menu' ? 'activea' : ''">菜单</li>
    </nav>
    <!-- 菜谱列表 -->
    <div class="list" v-if="choose === 'caipu'">
      <div v-for="(item, index) in list1" :key="index" class="list-item">
        <!-- 菜谱封面 -->
        <img :src="item.coverImg" class="fengmian" @click="goDetail(item)" />
        <p>{{ item.title }}</p>
        <!-- 发布菜谱的用户的信息 -->
        <div class="userInfo">
          <!-- 头像 -->
          <img :src="item.avatar" />
          <!-- 用户名 -->
          <span>{{ item.user_name }}</span>
        </div>
      </div>
    </div>
    <!-- 用户列表 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" v-if="choose === 'user'">
      <div class="box" v-for="(item, index) in list" :key="index">
        <img v-lazy="item.avatar" alt="" class="left" />

        <div class="right">
          <div>
            <p class="username">{{ item.user_name }}</p>
            <p class="time">
              {{ item.sex }}
              <span>{{ item.registerDate }}年加入</span>
            </p>
          </div>
          <p ref="gz" class="btn" @click="follow(item, index, $event)">+ 关注</p>
          <p ref="qxgz" class="btn btn_qxgz dnone" @click="delGzhu(item, index)">已关注</p>
        </div>
      </div>
    </van-list>
    <!-- 菜单列表 -->
    <div class="list" v-if="choose === 'menu'">
      <div v-for="(item, index) in list1" :key="index" class="list-item">
        <!-- 菜谱封面 -->
        <img :src="item.coverImg" class="fengmian" @click="goDetail(item)" />
        <div class="float">15道菜</div>
        <p>{{ item.title }}</p>
        <!-- 发布菜谱的用户的信息 -->
        <div class="userInfo">
          <!-- 头像 -->
          <img :src="item.avatar" />
          <!-- 用户名 -->
          <span>{{ item.user_name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { List, Toast } from "vant";
import { getAllUser, getSearchUser, getRecipeListApi } from "@/api/home";
import { findConcernApi, addConcernApi, cancelConcernApi } from "@/api/concern";
export default {
  components: {
    [List.name]: List,
  },
  data() {
    return {
      // 菜谱总列表
      recipeList: [],
      searchRecipeList: [],
      list1: [
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u351.png",
          title: "不用烤箱也能美味！新手...",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          user_name: "不会做饭的西瓜",
        },
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u132.png",
          title: "不用烤箱也能美味！新手...",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          user_name: "不会做饭的西瓜",
        },
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u363.png",
          title: "不用烤箱也能美味！新手...",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          user_name: "不会做饭的西瓜",
        },
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u362.png",
          title: "不用烤箱也能美味！新手...",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          user_name: "不会做饭的西瓜",
        },
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u374.png",
          title: "不用烤箱也能美味！新手...",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          user_name: "不会做饭的西瓜",
        },
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u380.png",
          title: "不用烤箱也能美味！新手...",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          user_name: "不会做饭的西瓜",
        },
      ],
      show: false,
      choose: "caipu",

      list: [],
      loading: false,
      finished: false,
    };
  },
  created() {

    // 获取菜谱总数据
    this.getRecipeList()

    // 拿仓库搜索帅选菜谱数据
    this.list1 = JSON.parse(localStorage.getItem('searchRecipeList')) || this.$store.state.searchRecipeList
    // console.log(this.$store.state.searchRecipeList);
  },
  methods: {
    // 跳转详情
    goDetail(item) {
      console.log(item);
      // localStorage.setItem('listDatail', JSON.stringify(item));
      this.$router.push({ name: 'detail', params: { recipe_id: item._id } })
    },
    // 获取搜索用户
    async getUser(d) {
      let { data } = await getSearchUser(d)
      console.log(data.data);
      this.list = data.data
      if (data.data.length == 0) {
        Toast({
          message: "没有找到~~~",
          icon: "success",
        });
      }
    },
    // 获取所有用户
    async getAllUser() {
      let { data } = await getAllUser()
      console.log(data.data);
      // this.list=data.data
    },

    // 获取菜谱
    async getRecipeList() {
      let { data } = await getRecipeListApi();
      this.recipeList = data.data
      console.log(data);

    },

    // 回车搜索数据
    listenInput(evt) {
      // str.match(/^[ ]*$/) 判断是否为空格
      if (evt.target.value.match(/^[ ]*$/) || !evt.target.value) {
        return
      }
      //  菜谱搜索

      this.searchRecipeList = this.recipeList.filter(item => item.title.includes(evt.target.value))

      console.log(this.recipeList);
      console.log(this.searchRecipeList);
      // 上传同步vuex仓库
      this.$store.commit('searchRecipe', this.searchRecipeList)
      //刷新页面
      this.list1 = this.searchRecipeList
      if (this.searchRecipeList.length == 0 && this.choose !== 'user') {
        Toast({
          message: "没有找到~~~",
          icon: "success",
        });
      }


      if (this.choose == 'user') {
        // 用户搜索
        // 获取用户
        this.getUser({ user_name: evt.target.value })
      }


      // evt.target.value=''
    },


    goBack() {
      // 返回点击进来前的页面
      this.$router.back();
    },
    showAction() {
      this.show = true;
    },
    chooseAction(el) {
      this.show = false;
      this.choose = el.target.classList.value;
    },
    onClickLeft() {
      history.back();
    },

    // 添加关注
    async follow(item, index, e) {
      console.log(item);
      let { data } = await findConcernApi({ user_idb: item._id })
      console.log(data);
      console.log(this.$refs.gz[index]);

      // this.$refs.gz[index].style.display="none"
      //   this.$refs.qxgz[index].style.display="block"
      if (data.concern === false) { //没关注

        let { data } = await addConcernApi({ user_idb: item._id, type: '1' })
        console.log(data);
        // console.log(e.target);
        this.$refs.gz[index].style.display = "none"
        this.$refs.qxgz[index].style.display = "block"
        Toast({
          message: "关注成功~~~",
          icon: "success",
        });

      } else {
        this.$refs.gz[index].style.display = "none"
        this.$refs.qxgz[index].style.display = "block"
        // console.log(data.concern)
        return
      }

    },

    //  取消关注
    async delGzhu(item, index) {
      console.log(item);
      let { data } = await cancelConcernApi({ user_idb: item._id })
      this.$refs.gz[index].style.display = "block"
      this.$refs.qxgz[index].style.display = "none"
      Toast({
        message: "取消关注~~~",
        icon: "success",
      });

    },
    async onLoad() {

      // 获取所有用户
      let { data } = await getAllUser()
      console.log(data.data);
      // this.list=data.data

      let a = {
        id: "1",
        sex: "女",
        registerDate: "2021",
        avatar:
          "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
        user_name: "西瓜",
      };
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(a);
        }
        // 数据库所有用户
        //  this.list=data.data
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 20) {
          this.finished = true;
        }
      }, 1000);

    },
  },
};
</script>

<style scoped lang="scss">
.dnone {
  display: none;
}

.activea {
  color: #3fec0a;
}

.btn_qxgz {
  background: #a6a6a6 !important;
}

header {
  height: 50px;
  line-height: 50px;

  i {
    font-size: 18px;
    position: absolute;
    left: 20px;
  }

  h3 {
    text-align: center;
    font-weight: 700;
  }
}

.searchOption {
  padding: 0 20px;
  height: 40px;
  margin-bottom: 15px;

  .searchInput {
    width: 85%;
    background-color: rgba(242, 242, 242, 1);
    position: relative;
    border-radius: 20px;

    i {
      color: #c0bbbb;
      padding-left: 20px;
    }

    input {
      width: 70%;
      height: 40px;
      border: none;
      outline: none;
      padding-left: 10px;
      background-color: rgba(242, 242, 242, 1);
    }
  }


  .icon-shaixuan {
    position: absolute;
    top: 50px;
    right: 20px;
    line-height: 40px;
    font-size: 28px;
  }
}

nav {
  width: 50px;
  text-align: center;
  padding: 5px;
  border: 1px solid #cccccc;
  position: absolute;
  top: 90px;
  right: 10px;
  background-color: #fff;
  border-radius: 10px;
  z-index: 10;

  li {
    padding: 5px 0;
    border-bottom: 1px solid #cccccc7e;

    &:last-child {
      border: none;
    }
  }
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 12px;
  line-height: 20px;
  padding: 0 20px;

  .list-item {
    width: calc(50% - 6px);
    position: relative;

    .fengmian {
      width: 100%;
      height: 202px;
    }

    span {
      color: #999;
    }

    p {
      color: #000;
    }

    .float {
      background-color: #666ee8;
      color: #fff;
      width: 40%;
      position: absolute;
      top: 0;
      padding-left: 10px;
      border-radius: 0 10px 10px 0;
    }
  }
}

.box {
  display: flex;
  align-items: center;
  height: 21.3333vw;
  padding: 0 4vw;
  justify-content: space-between;

  .left {
    border-radius: 50%;
    margin-right: 2.6667vw;
    width: 10.6667vw;
    height: 10.6667vw;
  }

  .right {
    height: 100%;
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;

    div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .time {
        margin-top: 2.6667vw;
        color: #999999;
        font-size: 3.2vw;
      }
    }

    .btn {
      background: #666ee8;
      text-align: center;
      border-radius: 6.6667vw;
      padding: 1.8667vw 4vw;
      font-size: 3.7333vw;
      color: #fff;
    }
  }
}

.userInfo {
  display: flex;
  align-items: center;

  img {
    margin-right: 7px;
  }
}
</style>
